<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 靠右的按钮 -->
      <el-card class="box-card">
        <el-button type="primary" size="small" @click="addFn">添加权限</el-button>
        <!-- 表格
      渲染树形结构条件：
      1、数据中必须包括children属性
      2、el-table标签上必须设置row-key属性
        row-key: 优化表格渲染，用于告诉表格组件我们的数据中id属性的值是唯一的
       -->
        <div class="tobal">
          <el-table
            border
            :data="permissionList"
            row-key="id"
            :tree-props="{children: 'children',hasChildren:'hasChildren'}"
          >
            >
            <el-table-column align="center" label="名称" prop="title" />
            <el-table-column align="center" label="标识" prop="code" />
            <el-table-column align="center" label="描述" prop="description" />
            <el-table-column align="center" label="操作">
              <template v-slot="{row}">

                <el-button v-if="(row.type==='1')" size="small" type="primary" @click="tianjiaFn(row.id)">添加子权限</el-button>
                <el-button size="small" @click="BianjiFn(row.id)">编辑</el-button>
                <el-button size="small" type="danger" @click="delerFn(row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

      </el-card>
      <!-- 弹出框 -->
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
      >
        <el-form ref="form" :model="formData" label-width="80px">
          <el-form-item label="权限名称">
            <el-input v-model="formData.title" />
          </el-form-item>
          <el-form-item label="权限标识">
            <el-input v-model="formData.code" />
          </el-form-item>
          <el-form-item label="权限描述">
            <el-input v-model="formData.description" />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeFn">取 消</el-button>
          <el-button type="primary" @click="qranFn">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getpermissionList, addpermission, removepermission, getpermissionBj, getpermissionId } from '@/api/permission'
export default {
  data() {
    return {
      dialogVisible: false,
      permissionList: [],
      limit: 2,
      start: 0,
      formData: {},
      pid: null
    }
  },
  created() {
    this.getpermissionList()
  },
  methods: {
    async getpermissionList() {
      const res = await getpermissionList({
        _limit: this.limit,
        _start: this.start
      })
      console.log(res, 88)
      this.permissionList = this.ListToTree(res.data, 0)
    },
    // 封装递归函数
    ListToTree(List, id) {
      const children = []
      List.forEach(item => {
        item.hasChildren = false
        if (Number(item.pid) === Number(id)) {
          item.hasChildren = true
          children.push(item)
          item.children = this.ListToTree(List, item.id)
        }
      })

      return children
    },

    // 添加
    addFn() {
      this.dialogVisible = true
    },
    // 确认按钮
    async  qranFn() {
      // 编辑
      if (this.formData.id) {
        await getpermissionBj(this.formData)
      } else {
        // 新增
        if (this.pid) {
          this.formData.pid = this.pid.toString()
          this.formData.type = '2'
        } else {
          this.formData.pid = '0'
          this.formData.type = '1'
        }
        await addpermission(this.formData)
        this.getpermissionList()
      }
      this.getpermissionList()
      this.closeFn()
    },
    // 关闭弹窗
    closeFn() {
      this.dialogVisible = false
      this.formData = {}
    },
    // 删除
    async delerFn(id) {
      await removepermission(id)
      this.getpermissionList()
    },
    // 编辑
    async BianjiFn(id) {
      this.dialogVisible = true
      const res = await getpermissionId(id)
      this.formData = res.data
    },
    // 添加子权限
    tianjiaFn(id) {
      this.dialogVisible = true
      this.pid = id
    }

  }
}
</script>

<style>
.tobal{
  border-top: 1px solid #000;
  margin-top: 30px;
}
.el-table{
  margin-top: 20px;
}
</style>

